<template>
  <div class="class">
    <div class="content">
      <!-- 面包屑 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>分类参数</el-breadcrumb-item>
      </el-breadcrumb>
      <el-alert title="！注意只允许为第三级分类设置参数" type="warning"></el-alert>
      <span>请选择商品分类</span>
      <el-cascader
        :options="options"
        :show-all-levels="false"
        @change="handleChange"
        :props="{
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
        }"
      ></el-cascader>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="用户管理" name="second">
          <el-button type="primary" disabled>设置动态参数</el-button>
          <el-table
            ref="singleTable"
            :data="arr"
            highlight-current-row
            @current-change="handleCurrentChange"
            style="width: 100%"
          >
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column property="attr_name" label="属性名称" width="120"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="配置管理" name="first">
          <el-button type="primary">设置动态参数</el-button>
          <el-table
            ref="singleTable"
            :data="tableData"
            highlight-current-row
            @current-change="hand"
            style="width: 100%"
          >
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column property="attr_name" label="属性名称" width="120"></el-table-column>
            <el-table-column property="attr_vals" label="属性值" width="120"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>


<script>
import http from "@/api/port";
export default {
  data() {
    return {
      options: [],
      tableData: [],
      activeName: "second",
      value: "",
      num: "",
      arr: []
    };
  },
  created() {
    this.datalist();
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    hand() {
      console("111");
    },
    datalist() {
      http(
        "categories",
        {
          type: 3
        },
        "get",
        {}
      ).then(res => {
        console.log("1111", res);
        this.options = res.data;
      });
    },
    handleChange(value) {
      console.log(value);
      this.value = value.join(",");
      this.num = value.join(",").slice(4);
      console.log(this.num);
      this.a();
      this.b();
    },
    a() {
      http(`categories/${this.num}/attributes`, {}, "get", {
        sel: "many"
      }).then(res => {
        this.arr = res.data;
        console.log(this.arr);
      });
    },
    b() {
      http(`categories/${this.num}/attributes`, {}, "get", {
        sel: "only"
      }).then(res => {
        console.log("2222", res);
        this.tableData = res.data;
        console.log(this.tableData);
      });
    }
  }
};
</script>


<style scoped lang="scss">
</style>
